<!--  -->
<script setup>
import { useBreadsStore } from '@/stores'
import { getUserAnswerListAPI } from '@/apis/answer'
import { onMounted, ref } from 'vue'
import { format } from '@/utils/time'
import IconLabel from '@/components/IconLabel.vue'

const { setBreadCrumbs } = useBreadsStore()
setBreadCrumbs([
  { title: '个人主页', path: '/users/settings' },
  { title: '回答' }
])
const props = defineProps(['userInfo'])

const data = ref(null)

onMounted(() => {
  getUserAnswerListAPI(props.userInfo.user.id).then(res => {
    data.value = res.data
    console.log(data.value)

  }).catch(() => null)
})
</script>

<template>
  <div class="view-container" v-if="data">
    <p class="section-title">用户的回答列表</p>
    <div v-for="item in data" :key="item.id">
      <div class="question-item">
        <RouterLink :to="`/question/${item.answerInfo.questionId}`" class="quest-header">
          <div class="title">{{ item.questionInfo.title }}</div>
        </RouterLink>
        <div class="quest-info">
          <span class="info-item">{{ '回答于 ' + format(item.createAt) }}</span>
          <IconLabel class="info-item" icon-name="thumb">{{ item.voteCount }} 个点赞</IconLabel>
          <IconLabel class="status" v-if="item.answerInfo.adopted" icon-name="answer">被采纳</IconLabel>
        </div>
        <div class="quest-tags">
          <RouterLink v-for="tag in item.questionInfo.tags" :key="tag" :to="`/tag/${tag.slugName}`" class="tag">
            {{ tag.slugName }}
          </RouterLink>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.view-container {

  .section-title {
    font-size: 1.2em;
    font-weight: bold;
  }

}

.question-item {
  padding: 1em 0;
  border-bottom: 1px dashed var(--border-secondary);

  .quest-header {
    display: flex;
    align-items: center;
    gap: 4px;

    &:hover {
      color: red;
    }

    .title {

      cursor: pointer;
      transition: color .1s ease-in-out;
    }
  }

  .quest-info {
    display: flex;
    align-items: center;
    margin: 1em 0;
    font-size: 0.8em;
    color: var(--text-secondary);

    .info-item {
      color: grey;
      margin-right: 1.5em;
    }
  }

  .quest-tags {
    display: flex;
    align-items: center;
    font-size: 0.8em;
    color: var(--text-secondary);

    .tag {
      margin-right: 0.5em;
      padding: 0.2em 0.5em;
      border-radius: 2px;
      background-color: var(--bgc-secondary);

      &:hover {
        background-color: var(--bgc-primary);
      }
    }
  }
}
</style>
